<template>
    <!-- CA签署病历 -->
    <section v-if="cfg.visible">
        <the-dialog :cfg="cfg" width="70%" defined-footer :loading="listLoading">
            <template slot="body">
                <div class="case__detail">
                    <!-- 病历封面 -->
                    <div v-if="pager.current == 1" class="detail__item is-cover">
                        <h3 class="item__title">{{ patientInfo.hospitalName || ''}}电子病历</h3>
                        <img class="item__logo" src="@/assets/img/hospitalicon.png" alt="">
                        <div class="item__main x-description x-description--flex">
                            <div :class="['x-description__row', {'is-full' : c.isFull}]" v-for="c in coverFields" :key="c.key">
                                <div class="row__label">{{c.label}}</div>
                                <div class="row__value ">
                                    <div class="value__inner" v-if="c.key == 'patientSex'">
                                        {{ $util.filterByIds(patientInfo[c.key], $dict[c.dict]) }}
                                    </div>
                                    <div class="value__inner" v-else-if="c.key == 'isMarried'">
                                        {{ $util.filterByIds(patientInfo[c.key], $dict.marriedIds) }}
                                    </div>

                                    <div class="value__inner" v-else>{{ patientInfo[c.key] }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="item__tips">注：本病历仅限医院使用</div>
                    </div>

                    <template v-if="pager.current > 1 && lists.length > 1">
                        <!-- 病历详细-- PNG版 v-if="$global.isCa"-->
                        <div>
                            <the-image-viewer :key="pager.current" v-if="lists[activeIndex].blImgUrl" class="item__case-pic" :url="lists[activeIndex].blImgUrl" width="100%" height="auto"></the-image-viewer>

                            <div v-else class="x-empty--defined">
                                <div class="defined__icon el-icon-tickets"></div>
                                <div class="defined__txt">暂无病历数据</div>
                            </div>
                        </div>

                        <!-- 病历详细-- 文字版 -->
                        <div v-if="false" class="detail__item">
                            <div class="item__head">
                                <div>
                                    <span class="head__title">{{lists[activeIndex.hospitalName]}}电子病历</span>
                                </div>
                            </div>

                            <div class="item__main x-description x-description--flex is-col-4 s-label--sm">
                                <div v-for="(o, idx) in detailFields" :key="idx" :class="['x-description__row', {'is-full' : o.isFull}, {'is-flex-2' : o.isClear}]">
                                    <div class="row__label row__label--right">{{o.label}}：</div>
                                    <div class="row__value">
                                        <!-- $dict 过滤字段 -->
                                        <template v-if="o.dict">
                                            {{ $util.filterByIds(lists[activeIndex][o.key], $dict[o.dict])}}
                                        </template>

                                        <!-- 身高/体重 -->
                                        <template v-else-if="o.key == 'weight'">
                                            <span v-show="lists[activeIndex].patientHeight">{{ lists[activeIndex].patientHeight }}cm</span>
                                            /
                                            <span v-show="lists[activeIndex].patientWeight">{{ lists[activeIndex].patientWeight }}kg</span>
                                        </template>

                                        <template v-else-if="o.key == 'drugInfos'">
                                            <p v-for="(c, cIdx) in lists[activeIndex][o.key]" :key="cIdx">{{ c }}</p>
                                        </template>

                                        <template v-else>{{ lists[activeIndex][o.key] || '暂无' }}</template>
                                    </div>
                                </div>
                            </div>
                            <div class="item__dr">
                                <div class="dr__left">就诊日期：{{lists[activeIndex].createTime}}</div>
                                <div class="dr__right">
                                    <span>医生签名：</span>
                                    <!-- <span>{{lists[activeIndex].trueName}}</span> -->
                                    <the-image-viewer v-if="lists[activeIndex].doctorAutograph" class="dr__sign" :url="lists[activeIndex].doctorAutograph" width="auto" height="50px"></the-image-viewer>
                                </div>
                            </div>
                        </div>

                        <!-- 病历为空 -->
                        <!-- <div v-else-if="activeIndex != 0 && lists.length < 1" class="x-empty--defined">
                            <div class="defined__icon el-icon-tickets"></div>
                            <div class="defined__txt">暂无病历数据</div>
                        </div> -->
                    </template>
                </div>
            </template>
            <template v-if="lists.length > 0" slot="foot">
                <the-pager :pager="pager" align="center" layout="prev, pager, next, jumper, ->" @onChange="onChangePager"></the-pager>
            </template>
        </the-dialog>
    </section>
</template>

<script>
    // import pdfDialog from '@/components/view-pdf';
    export default {
        // components: {
        //     pdfDialog
        // },
        data() {
            return {
                cfg: {
                    visible: false,
                    title: '查看病历'
                },

                editRow: {},
                editId: '',
                patientInfo: {},
                idCard: '', // 患者身份证号

                coverFields: [
                    { key: 'patientName', label: '名字' },
                    { key: 'patientIdcard', label: '身份证' },
                    { key: 'patientSex', label: '性别', dict: 'sexIds' },
                    { key: 'patientAge', label: '年龄（岁）' },
                    { key: 'patientPhone', label: '手机号码' },
                    { key: 'isMarried', label: '婚姻' },
                    { key: 'patientWeight', label: '体重（kg）' },
                    { key: 'patientProfession', label: '职业', isFull: true },
                    { key: 'patientAllergyDetails', label: '药物过敏史', isFull: true },
                ], // 封面字段

                detailFields: [
                    { key: 'createTime', label: '就诊日期' },
                    { key: 'departmentName', label: '科别' },
                    { key: 'outpatientNumber', label: '门诊号' },
                    { key: 'paymentMethod', label: '付费类型', dict: 'paymentIds' },
                    { key: 'patientName', label: '姓名' },
                    { key: 'patientSex', label: '性别', dict: 'sexIds' },
                    { key: 'patientAge', label: '年龄（岁）' },
                    // { key: 'doctorNation', label: '民族' },
                    { key: 'weight', label: '身高/体重（cm/kg）' },
                    { key: 'patientPhone', label: '联系电话' },
                    { key: 'patientAddress', label: '单位或地址', isClear: true },
                    { key: 'mainSuit', label: '主诉', isFull: true },
                    { key: 'presentIllness', label: '现病史', isFull: true },
                    { key: 'historyPresentIllness', label: '既往史', isFull: true },
                    { key: 'patientAllergyDetails', label: '过敏史', isFull: true },
                    { key: 'vitalSigns', label: '生命体征', isFull: true },
                    // { key: 'physicalExamination', label: '体格检查', isFull: true },
                    { key: 'applicationFormStr', label: '辅助检查', isFull: true },
                    { key: 'diagnosisDescribe', label: '诊断', isFull: true },
                    { key: 'detailsEntrust', label: '医嘱', isFull: true },
                    { key: 'healthGuidanceStr', label: '健康教育', isFull: true },
                    { key: 'hospitalizationStr', label: '处理意见', isFull: true },
                    { key: 'drugInfos', label: '处方', isFull: true, isTag: true },


                    /*  
                     { key: 'isChildOption', label: '特殊情况', dict: 'specialCaseIds' },
                     { key: 'inspectionOpinion', label: '报告建议单', isFull: true, isTag: true },
                     { key: 'mediaMaterials', label: '其他资料', isFull: true, isImg: true }, */
                ], // 问诊记录字段

                listLoading: false,
                lists: [],
                pager: {
                    ...this.$global.pager,
                    size: 1
                },
                activeIndex: 0,

            }
        },
        methods: {
            onOpen(row = {}) {
                this.editRow = { ...row };
                this.editId = row.logId || row.id || '';

                this.cfg.visible = true;
                this.cfg.title = `查看病历`

                this.activeIndex = 0;
                this.pager.current = 1;

                this.getPatient();
                // this.getList();
            },
            getList() {
                let params = {
                    current: this.pager.current - 1,
                    size: 1,
                    id: this.editId,
                    identityCard: this.editRow.patientIdcard,
                };

                this.listLoading = true;
                this.$ajax.getInquiryLogByUserIdList(params).then(res => {
                    //  getPatientInquiryLog
                    this.listLoading = false;

                    // this.lists = res.data.list ? [...this.lists, ...res.data.list] : [...this.lists];
                    // this.lists = res.data.list || [];

                    this.lists = res.data.list && res.data.list.length > 0 ? [this.patientInfo, ...res.data.list] : [this.patientInfo];
                    this.pager.total = (res.data.total || 0) + 1;
                }).catch(err => {
                    this.listLoading = false;
                    this.$util.message(err.msg);
                })
            },
            getPatient() {
                this.lists = [];

                this.$ajax.getPatientInquiryInfo({
                    id: Number(this.editId)
                }).then(res => {
                    this.patientInfo = res.data || {};

                    // this.lists.push(this.patientInfo);

                    this.getList();
                }).catch(err => {
                    this.$util.message(err.msg)

                    // this.lists.push(this.editRow);
                    this.getList();
                })
            },
            onChangePager(options) {
                this.pager.current = options.current;
                this.activeIndex = 1 // options.current - 1;

                this.getList();
            },
            // 查看处方
            showPdfDialog(row, key) {
                let params = {
                    id: key == 'hospitalization' ? row.logId : row.id,
                    resource: ''
                };

                if (row.templateValue) params.template = row.templateValue;

                params.resource = {
                    'inquiryLogPrescription': 4, // '电子处方'
                    'applicationForm': 5, // '检查检验申请单'
                    'inspectionOpinion': 3, // '报告意见单'
                    'healthGuidance': 2, // '健康指导'
                    'hospitalization': 1, // '住院申请书',
                    'caseHistory': 6 // '病历'
                } [key];

                this.$refs.pdfDialog && this.$refs.pdfDialog.onOpen(params);
            },
        },
        mounted() {

        }
    }
</script>

<style lang="scss" scoped>
    .case__detail {
        min-height: 50vh;
    }

    .detail__item {
        &.is-cover {

            /* 首页封面 */
            .x-description__row {
                margin-bottom: 24px;
                line-height: 36px;

                .row__label {
                    padding: 0 12px 0 24px;
                }

                .row__value .value__inner {
                    padding-bottom: 9px;
                }
            }
        }

        .item__head {
            // @include flex;
            // @include flex-col-c;
            // @include flex-row-between;

            padding: 12px 24px 24px 44px;
            font-size: 16px;
            font-weight: 400;
            text-align: center;


            .head__tip {
                color: $--tips-color;
                font-size: 14px;
                font-weight: 400;
            }

            .head__title {
                margin: 0 0 12px;
                color: $--main-color;
                font-size: 18px;
                font-weight: 600;
            }
        }

        .item__title {
            margin: 0 0 12px;
            color: $--main-color;
            font-size: 18px;
            font-weight: 600;
            text-align: center;
        }

        .item__logo {
            display: block;
            width: 70px;
            margin: 24px auto;
            text-align: center;
        }

        .item__tips {
            margin: 12px 0 0;
            color: $--light-color;
            font-size: 12px;
            text-align: center;
        }

        .item__tag {
            margin: 2px 6px 2px 0;
            cursor: pointer;
        }

        .item__imglist {
            font-size: 0;
            white-space: nowrap;
            overflow-x: auto;

            .imglist__col {
                display: inline-block;
                margin-right: 6px;
            }
        }


        .item__dr {
            @include flex;
            @include flex-row-between;
            // @include flex-col-c;

            padding: 44px 30px 12px;

            .dr__left,
            .dr__right {
                @include flex-1;
            }

            .dr__right {
                text-align: right;
            }

            .dr__item {
                display: inline-block;
            }

            .dr__sign {
                // height: 50px;
                display: inline-block;
                margin: 0 6px;
                max-width: 120px;
                vertical-align: text-top;
            }
        }

        .item__case-pic {
            margin: 0 auto;
        }
    }
</style>